<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix='sec' uri='http://www.springframework.org/security/tags'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<script type="text/javascript" src="scripts/boot.js"></script>
	<style type="text/css">
		.mini-checkboxlist-item{
			padding: 5px;
		}
	</style>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
	<div id="toolbar1" class="mini-toolbar" style="padding:2px;">
		<table style="width:100%;">
			<tr>
				<td>
					<a class="mini-button" iconCls="icon-add" plain="true" onclick="openCreate" >创建会议</a>
				</td>
			</tr>
		</table>
	</div>
	<input class="mini-hidden" id="extension" />
	<div class="mini-fit" >
		<div id="meet_grid" class="mini-datagrid" showPager="false" style="width:100%;height:100%;" allowResize="true"
	        url=""  idField="id" onshowrowdetail="onShowRowDetail" >
	        <div property="columns">   
	        	<div type="indexcolumn">序号</div>         
	            <div type="expandcolumn" >#</div>
	            <div field="meetNum" width="320" headerAlign="left" >会议号</div>  
	            <div field="locking" width="320" headerAlign="left" >是否锁定</div>
	            <div name="action" width="19%" headerAlign="center" align="center" renderer="onActionRenderer" >相关操作</div>        
	        </div>
	    </div> 
	    
	    <div id="detailGrid_Form" style="display:none;">
	        <div id="extension_grid" class="mini-datagrid" showPager="false" style="width:100%;height:auto;" url="" >
	            <div property="columns">
	            	<div type="indexcolumn">序号</div>
	                <div field="eName" width="120" headerAlign="center" allowSort="true">分机名称</div>
	                <div field="eNum" width="120" headerAlign="center" allowSort="true">分机号</div>
	                <div field="admin" width="120" headerAlign="center" allowSort="true">是否为管理员</div>
	                <div field="mute" width="120" headerAlign="center" allowSort="true">是否静音</div>
	                <div name="action" width="19%" headerAlign="center" align="center" renderer="removeAction" >相关操作</div>
	            </div>
	        </div>    
	    </div>
	    
	    <div id="createWindow" class="mini-window" title="会议号" style="width:200px;height:140px;" showModal="true" allowDrag="false">
			<input id="meet_num" class="mini-textbox" emptyText="请输入会议号" style="margin-left: 20px;margin-top: 10px;width: 150px;"/>
			<div style="text-align:center;padding-top:30px;">               
	            <a class="mini-button" onclick="createMeeting" style="width:60px;margin-right:20px;">确定</a>     
	            <a class="mini-button" onclick="onCancel" style="width:60px;">取消</a>       
        	</div> 
		</div>
	</div>
<script type="text/javascript">
	mini.parse();
	
	var meetGrid = mini.get("meet_grid");
	var extensionGrid = mini.get("extension_grid");
	
	var detailGrid_Form = document.getElementById("detailGrid_Form");
	
/*连接WebSocket*/
    jQuery.openWebSocket("ws://172.16.2.11:8080/websocket");
    
// 连接成功时执行
    function webSocketOnOpen(event) {
    	jQuery.confbridgeListRooms();
 	}
    
// 接收返回数据
    function webSocketOnMessage(event) {
		var data = $.evalJSON(event.data);
		switch (data.Event) {
		case "ConfbridgeListRooms":
			var datas = [];
			data.ConfbridgeListRooms.forEach(function(obj) {
				var eObj = {};
				eObj.meetNum = obj.Conference;
				eObj.locking = obj.Locked;
				datas.push(eObj);
			});
			meetGrid.setData(datas);
			break;
		case "ConfbridgeList":
			var extensionDatas = [];
			data.ConfbridgeList.forEach(function(obj) {
				var extensionData = {};
				extensionData.eName = obj.CallerIDName;
				extensionData.eNum = obj.CallerIDNum;
				extensionData.admin = obj.Admin;
				extensionData.mute = obj.Muted;
				extensionDatas.push(extensionData);
			});
			extensionGrid.setData(extensionDatas);
			break;
		case "createConference":
			if(data.createConference == "succ") {
				mini.alert("创建失败");
			} else {
				mini.showMessageBox({
                    title: "提示",
                    showModal:false,
                    iconCls: "mini-messagebox-info",
                    message: "创建成功！",
                    timeout: 3000,
                    x: 'right',
                    y: 'bottom'
                });
// 				var row0 = {};
// 				row0.eNum = members[i];
// 				meetGrid.addRow(row0, 0);
			}
			break;
		case "conferenceKick":		// 踢出会议成员
			if(data.conferenceKick == "succ") {
				
			} else {
				
			}
			break;
		case "conferenceMute":		// 禁言
			
			
			
			break;
		case "conferenceUnmute":	// 解除禁言
			
			break;
		}
	}
	
	// 展开详细
	function onShowRowDetail(e) {
         var grid = e.sender;
         var row = e.record;
         var td = grid.getRowDetailCellEl(row);
         td.appendChild(detailGrid_Form);
         detailGrid_Form.style.display = "block";
         jQuery.confbridgeList(row.meetNum);
    }
	
	// 打开创建会议
	var createWindow = mini.get("createWindow");
	function openCreate(e) {
		var el=e.sender.getEl();
		$.post("alternately_cur_extension.do", function(data) {
			if(null != data.phoneNum && data.phoneNum.length > 1) {
				extension.setValue(data.phoneNum);
				createWindow.showAtEl(el, {
				   xAlign:"left",
				   yAlign:"below"
				});
			} else {
				mini.alert("请先登录分机！");
			}
		}, "json");
	}
	
	// 创建会议
	var extension = mini.get("extension");
	function createMeeting() {
		var meetNum = mini.get("meet_num");
		if(meetNum.getValue().length == 0) {
			mini.alert("请输入会议号!");
		} else {
			jQuery.createConference(meetNum.getValue(), extension.getValue());
			meetNum.setValue("");
			createWindow.hide();
		}
	}
	
	// 关闭
	function onCancel(e) {
		createWindow.hide();
    }
	
	// 队列相关操作
	function onActionRenderer(e) {
		return '<a href="javascript: meetingLocked()" style="margin-right:5px;">锁定会议</a>'+
		'<a href="javascript: meetingUnLocked()" style="margin-right:5px;">解锁会议</a>'+
		'<a href="javascript: addMember()">加入会议</a>';
	}
	
	// 锁住会议
	function meetingLocked() {
		var row1 = meetGrid.getSelected();		// 会议行
		$.post("alternately_cur_extension.do", function(data) {
			if(data.phoneNum.length > 0) {
				jQuery.conferenceLock(row1.meetNum, data.phoneNum);
			} else {
				mini.alert("请先登录分机！");
			}
		}, "json");
	}
	
	// 解除锁定会议
	function meetingUnLocked() {
		var row1 = meetGrid.getSelected();		// 会议行
		$.post("alternately_cur_extension.do", function(data) {
			if(data.phoneNum.length > 0) {
				jQuery.conferenceUnlock(row1.meetNum, data.phoneNum);
			} else {
				mini.alert("请先登录分机！");
			}
		}, "json");
	}
	
	// 加入会议
	function addMember() {
		var row1 = meetGrid.getSelected();
		$.post("alternately_cur_extension.do", function(data) {
			if(data.phoneNum.length > 0) {
				jQuery.addConference(row1.meetNum, data.phoneNum);
			} else {
				mini.alert("请先登录分机！");
			}
		}, "json");
	}
	

	// 分机相关操作
	function removeAction(e) {
		return '<a href="javascript: removeMeeting()">踢出会议</a>'+
		'<a id="btn_sayDisabled" href="javascript: sayDisabled()" style="margin-left: 15px;">禁言</a>'+
		'<a id="btn_sayEnabled" href="javascript: sayEnabled()" style="margin-left: 15px;" >解除禁言</a>';
	}
	
	// 踢出会议
	function removeMeeting() {
		var row1 = meetGrid.getSelected();		// 会议行
		var row2= extensionGrid.getSelected();	// 分机行
		jQuery.conferenceKick(row1.meetNum, row2.eNum);
		extensionGrid.removeRow(row2, false);
	}
	
	// 禁言
	function sayDisabled() {
		var row1 = meetGrid.getSelected();		// 会议行
		var row2= extensionGrid.getSelected();	// 分机行
		jQuery.conferenceMute(row1.meetNum, row2.eNum);
	}
	
	// 解除禁言
	function sayEnabled() {
		var row1 = meetGrid.getSelected();		// 会议行
		var row2= extensionGrid.getSelected();	// 分机行
		jQuery.conferenceUnmute(row1.meetNum, row2.eNum);
	}
	
</script>
</body>
</html>